{extend name="common/tpl_layout" /}

<!--编码格式-->
{block name='charset'}UTF-8{/block}

<!--自定义meta-->
{block name="custom_head"}
{include file='manage@common/include_custom_head' /}
{/block}

<!--自定义meta-->
{block name="custom_head"}
{include file='manage@common/include_custom_head' /}
<script type="text/javascript"src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
<meta http-equiv="Cache-Control" content="no-siteapp" /><meta name="renderer" content="webkit|ie-comp|ie-stand">
<script>
    // 是否开启刷新记忆tab功能
    // var is_remember = false;
</script>
{/block}

{block name="header"}
{/block}
{block name="sidebar"}
{/block}

<!--主体内容-->
{block name="content"}
<div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">演示</a>
        <a>
          <cite>导航元素</cite></a>
      </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>
<div class="x-body">
    <div class="layui-row">
        <form class="layui-form layui-col-md12 x-so">
            <input class="layui-input"  autocomplete="off" placeholder="开始日" name="start" id="start">
            <input class="layui-input"  autocomplete="off" placeholder="截止日" name="end" id="end">
            <input type="text" name="username"  placeholder="请输入用户名" autocomplete="off" class="layui-input">
            <button class="layui-btn"  lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button>
        </form>
    </div>
    <table class="layui-table" id="test" lay-filter="test">
        <thead>
        </thead>
    </table>

</div>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
    </div>
</script>
<script type="text/html" id="switchTpl">
    <!-- 这里的 checked 的状态只是演示 -->
    <input type="checkbox" name="sex" value="{{d.id}}" lay-skin="switch" lay-text="女|男" lay-filter="sexDemo" {{ d.id == 10003 ? 'checked' : '' }}>
</script>
<script>
    layui.use('laydate', function(){
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem: '#start' //指定元素
        });

        //执行一个laydate实例
        laydate.render({
            elem: '#end' //指定元素
        });


    });
</script>
<script>
    layui.use('table', function(){
        var table = layui.table;
        
        table.render({
            //指定原始表格元素选择器（推荐id选择器）
            elem: '#test',
            //设置表头
            cols: [
                [
                    {title: '全选', type:'checkbox'},
                    {title: 'ID', field: 'id'},
                    {title: '用户名', field: 'username'},
                    {title: '邮箱', field: 'email'},
                    {title: '性别', field: 'sex'},
                    {title: '城市', field: 'city'},
                    {title: '积分', field: 'experience'},
                ]
            ],
            page: false,
            limit: 5,
            limits: [10,30,50,100],
            url: "{:url('ViewTemplate/getUserData')}",
            loading : true,
            //如果无需传递额外参数，可不加该参数
            where: {},
            //如果无需自定义HTTP类型，可不加该参数
            method: 'get',
            parseData: function(res){ //res 即为原始返回的数据
                // let data = {
                //     "code": res.code, //解析接口状态
                //     "msg": res.msg, //解析提示文本
                //     "count": res.total, //解析数据长度
                //     "data": res.data.item //解析数据列表
                // };
                return res;
            }
        });
        
        //监听单元格编辑
        table.on('edit(test)', function(obj){
            var value = obj.value //得到修改后的值
                ,data = obj.data //得到所在行所有键值
                ,field = obj.field; //得到字段
            layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改为：'+ value);
        });

        //头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：'+ data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选': '未全选');
                    break;
            };
        });
    });
</script>
{/block}

{block name="footer"}
{/block}